<template>
	<view class="page-wrap">
		<view class="header">
			<view class="header-bg" style="position: relative;">
				<!-- #ifdef APP-PLUS || H5 -->
				<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts"
					class="echarts"></view>
				<view class="uni-flex rank" style="justify-content: center; flex: 1;">
					<view class="rank-btn">
						您击败了80%的人
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script module="echarts" lang="renderjs">
	// import * as echarts from "echarts"
	var axisLineColor = [
		[1, '#80B8FF ']
	]
	export default {
		name: "xyyb",
		data() {
			return {
				fenshus: 100,
				option: {
					series: [{
							title: {
								offsetCenter: ['0', '-60%'],
								fontSize: 18,
								color: "#fff",
								show: true
							},

							name: '信用分',
							type: 'gauge',
							startAngle: 210,
							endAngle: -30,
							splitNumber: 10, //刻度数量
							min: 0,
							max: 1000,
							radius: '70%', //图表尺寸
							center: ['50%', '50%'],
							z: 3,
							axisLine: {
								show: true,
								lineStyle: {
									width: 0,
									shadowBlur: 0,
									color: axisLineColor
								}
							},
							axisTick: {
								show: true,
								lineStyle: {
									color: 'auto',
									width: 2
								},
								length: 6,
								splitNumber: 5
							},
							splitLine: {
								show: true,
								length: 0,
								lineStyle: {
									color: 'auto',
								}
							},
							axisLabel: {
								show: false
							},
							pointer: { //仪表盘指针
								//show: 0,
								length: '70%',
								width: 0
							},
							detail: {
								// borderColor: '#fff',
								// shadowColor: '#fff', //默认透明
								shadowBlur: 0,
								// #ifdef APP-PLUS
								offsetCenter: [0, '-5%'], // x, y，单位px
								// #endif 
								// #ifndef APP-PLUS
								offsetCenter: [0, '0%'], // x, y，单位px
								// #endif 
								textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE 
									color: '#fff',
									fontSize: 60,
								},
								formatter: '{value}'
								// formatter: function(value) {
								// 	return "AAA"
								// },
							},
							data: [{
								value: this.fenshus ? this.fenshus : 100,
								name: '-信用分-'
							}]
						},
						{ // 外圆
							type: 'pie',
							radius: '88%',
							center: ['50%', '50%'],
							z: 1,
							itemStyle: {
								normal: {
									color: '#2C73F6',
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								},
							},
							hoverAnimation: false,
							label: {
								show: false,
							},
							tooltip: {
								show: false
							},
							data: [{
								value: 100,
								itemStyle: {
									normal: {
										color: '#2C73F6'
									},
									emphasis: {
										color: '#2C73F6'
									}
								}
							}],
						},
						{ //内圆
							type: 'pie',
							radius: '80%',
							center: ['50%', '50%'],
							z: 2,
							itemStyle: {
								normal: {
									color: '#4081FC',
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								},
							},
							hoverAnimation: false,
							label: {
								show: false,
							},
							tooltip: {
								show: false
							},
							data: [{
								value: 100,
								itemStyle: {
									normal: {
										color: '#4081FC'
									},
									emphasis: {
										color: '#4081FC'
									}
								}
							}]
						}
					]
				},
			}
		},

		onLoad() {
			this.init();
		},
		methods: {
			init() {
				let percentage = 0;
				let grade = 100;
				this.option.series[0].data[0].value = grade ? Number(grade) : 0;
				percentage = (grade / 100).toFixed(2);
				this.option.series[0].axisLine.lineStyle.color = [
					[percentage, '#ffffff'],
					[1, '#80B8FF']
				]
			}
		}

	}
</script>

<style>
	.page-wrap {
		padding-bottom: 1rpx;
		background: #f5f7fa;

		.header {
			position: relative;

			.header-bg {
				/* #ifdef APP-PLUS */
				padding-top: var(--status-bar-height);
				/* #endif */
				height: 550rpx;
				background: url(@/static/images/header.png) left top no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.rank {
		position: absolute;
		width: 100%;
		/* #ifdef APP-PLUS */
		bottom: calc(278rpx - var(--status-bar-height));
		/* #endif */
		/* #ifndef APP-PLUS */
		bottom: 150rpx;
		/* #endif */
		line-height: 1;
		z-index: 2;
	}

	.rank-btn {
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		color: #C9DBFF;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		background: #5C93FF;
	}

	.echarts {
		width: 100%;
		height: 520rpx;
		position: relative;
		z-index: 1;
	}

	.uni-flex {
		display: flex;
		flex-direction: row;
	}
</style>